<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                </el-breadcrumb>
        </el-row>

        <el-row>
            <el-button type="primary" size="small" @click='addMenu'>新增权限</el-button>
        </el-row>

        <el-row class="bone-top-10" :gutter="10">
            <el-col :span='4'>
                <el-card>
                    <div slot='header'>
                        <span>权限列表</span>
                    </div>
                        <div>
                            <el-tree :data='tree.treeData' :props="tree.defaultProps" @node-click="treeNodeClick"></el-tree>
                        </div>
                    
                </el-card>
                
            </el-col>
            <el-col :span='6' v-show="form.isShow">
                <el-card>
                    <div slot="header">
                        <span>{{form.formTitle}}</span>
                    </div>
                <el-form :model="form" :rules="form.rules" ref="form" size="small" label-width="80px" label-position='right'>
                    <el-form-item label='权限名称' prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label='权限标识' prop="tag">
                        <el-input v-model="form.tag" placeholder="请输入标识"></el-input>
                    </el-form-item>
                    <el-form-item label='权限类型' prop="type">
                        <el-select v-model.number="form.type" placeholder="请选择类型" style="width:100%">
                            <el-option v-for="item in form.typeItems" :key="item.typeId" :label="item.typeName" :value="item.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='页面url' prop="url">
                        <el-input v-model="form.url" placeholder="请输入url"></el-input>
                    </el-form-item>
                    <el-form-item label='权限图标' prop="icon">
                        <el-input v-model="form.icon" placeholder="请输入图标"></el-input>
                    </el-form-item>
                    <el-form-item label='父权限' prop="pname">
                        <el-input v-model="form.pname" placeholder="请选择父菜单"></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop="orderNum">
                        <el-input-number :min='1' :max='50' v-model="form.orderNum" @change='orderNumChange' style="width:100%"></el-input-number>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                        <el-button @click="goBack()" type="primary">返回</el-button>
                    </el-form-item>
                    
                </el-form>
                </el-card>
            </el-col>
            <el-col :span='20' v-show="!form.isShow">
                <el-table :data="table.tabledata" border stripe style="width:100%" size="small"
                :highlight-current-row="true"
                ref="multipleTable"
                >
                    <el-table-column label="编号" prop='num' width="80"></el-table-column>
                    <el-table-column label="名称" prop='name' width="100"></el-table-column>
                    <el-table-column label="类型" prop='type' width="80">
                        <template slot-scope="scope">
                            <el-tag v-if='scope.row.type==1'>目录</el-tag>
                            <el-tag v-if='scope.row.type==2' type='warning'>菜单</el-tag>
                            <el-tag v-if='scope.row.type==3' type='success'>按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="标识" prop='tag' width="200"></el-table-column>
                    <el-table-column label="父权限" prop='pname' width="80"></el-table-column>    
                    
                    <el-table-column label="图标" prop='icon' width="80">
                        <template slot-scope="scope">
                            <span v-if='scope.row.icon' style="font-size:20px;">
                                <i :class="scope.row.icon"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="地址" prop='url' width="200"></el-table-column>
                    <el-table-column label="是否可用" prop='usable'>
                        <template slot-scope="scope">
                            <span style='font-size:20px;'>
                              <i v-if='scope.row.usable' class="el-icon-check"></i>
                              <i v-else class="el-icon-close"></i>
                            </span>
                            
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop='orderNum' width="80"></el-table-column>
                    <el-table-column label="创建时间" prop='createTime' width="150"></el-table-column>
                    
                    <el-table-column label="操作" width="150" fixed="right">
                      <template slot-scope="scope">
                        <el-button v-if='scope.row.usable' @click='disableMenu(scope.row.num)' size="small" type="text">禁用</el-button>
                        <el-button size="small" type="text" @click='modifyMenu(scope.row)'>修改</el-button>
                        
                        <el-button v-if='!scope.row.usable' @click="usableMenu(scope.row.num)" size="small" type="text">启用</el-button>
                        <el-button v-if='!scope.row.usable' @click="deleteMenu(scope.row.num)" size="small" type="text">删除</el-button>
                      </template>
                    </el-table-column>
                </el-table>
                <el-pagination class='bone-top-10 my-el-pagination'
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="this.table.currentPage" 
                :page-sizes="[10, 20, 30]" 
                :page-size="this.table.pageSize" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="this.table.rowCount">

                </el-pagination>
            </el-col>
        
        </el-row>
        
  </div>
</template>
<script>
import Http from "@/components/utils/httpUtil";
export default {
  data() {
    return {
      //表格数据
      table: {
        tabledata: [],
        pageSize: 10,
        currentPage: 1,
        rowCount: 0,
        queryKey: ""
      },
      //树结构数据
      tree: {
        treeData: [],
        defaultProps: {
          children: "children",
          label: "name"
        }
      },
      //表单数据
      form: {
        isShow: false,
        min: 1,
        submitDisabled: false,
        formTitle: "",
        isCreate: true,
        num: "",
        name: "",
        url: "",
        type: "",
        tag: "",
        icon: "",
        usable: true,
        orderNum: 1,
        pnum: 0,
        pname: "",

        typeItems: [
          {
            typeId: 1,
            typeName: "目录"
          },
          {
            typeId: 2,
            typeName: "菜单"
          },
          {
            typeId: 3,
            typeName: "按钮"
          }
        ],
        rules: {
          name: [{ required: true, message: "请输入名称", trigger: "blur" }],
          tag: [{ required: true, message: "请输入标识", trigger: "blur" }],
          type: [
            {
              required: true,
              message: "请选择类型",
              trigger: "change",
              type: "number"
            }
          ]
        }
      }
    };
  },
  methods: {
    //左边权限树点击
    treeNodeClick(data) {
      this.form.pname = data.name;
      this.form.pnum = data.num;
    },

    //创建树结构数据
    createTree(data, pnum) {
      pnum = pnum || 0;
      let list = [];
      data.map(item => {
        if (item.pnum == pnum) {
          item.children = this.createTree(data, item.num);
          list.push(item);
        }
      });
      return list;
    },

    //获取树结构数据
    getTreeData() {
      let p = {};
      let treeData = [];
      Http.fetch("/menu/listAll", p).then(res => {
        let tree = this.createTree(res.data, 0);
        this.tree.treeData = tree;
      });
    },

    //获取table数据
    getTableData() {
      let p = {};
      p.start = (this.table.currentPage - 1) * this.table.pageSize;
      p.num = this.table.pageSize;
      Http.fetch("/menu/listQuery", p).then(res => {
        this.table.tabledata = res.data.rows;
        this.table.rowCount = res.data.total;
      });
    },
    //表格每页显示数量切换
    handleSizeChange(val) {
      this.table.pageSize = val;
      this.getTableData();
    },
    //表格翻页
    handleCurrentChange(val) {
      this.table.currentPage = val;
      this.getTableData();
    },

    //新增按钮点击事件
    addMenu() {
      this.form.isShow = true;
      this.form.formTitle = "新增权限";
      this.form.isCreate = true;
      this.form.num = "";
      this.form.name = "";
      this.form.url = "";
      this.form.type = "";
      this.form.tag = "";
      this.form.icon = "";
      this.form.usable = true;
      this.form.orderNum = 1;
      this.form.pnum = 0;
      this.form.pname = "";
    },
    //点击修改事件
    modifyMenu(rowData) {
      this.form.isShow = true;
      this.form.formTitle = "修改权限";
      this.form.isCreate = false;
      this.form.num = rowData.num;
      this.form.name = rowData.name;
      this.form.url = rowData.url;
      this.form.type = rowData.type;
      this.form.tag = rowData.tag;
      this.form.icon = rowData.icon;
      this.form.usable = rowData.usable;
      this.form.orderNum = rowData.orderNum;
      this.form.pnum = rowData.pnum;
      this.form.pname = rowData.pname;
    },
    //编辑页面返回按钮
    goBack() {
      this.form.isShow = false;
    },

    //form排序选择变化.
    orderNumChange(val) {
      let a = parseInt(val);
      this.form.orderNum = a;
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let p = {};
          p.name = this.form.name;
          p.tag = this.form.tag;
          p.type = this.form.type;
          p.url = this.form.url;
          p.icon = this.form.icon;
          p.pnum = this.form.pnum;
          p.orderNum = this.form.orderNum;
          this.submitDisabled = true;

          let url = "/menu/add";
          //修改,添加num属性
          if (!this.form.isCreate) {
            p.num = this.form.num;
            url = "/menu/modify";
          }
          Http.fetch(url, p)
            .then(res => {
              this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
              });
              this.form.submitDisabled = false;
              this.form.isShow = false;
              this.getTreeData();
              this.getTableData();
            })
            .catch(err => {
              this.submitDisabled = false;
            });
        }
      });
    },
    //禁用权限
    disableMenu(num) {
      let p = {};
      p.num = num;
      Http.fetch("/menu/disable", p).then(res => {
        this.$message({
          showClose: true,
          message: res.sucMsg,
          type: "success"
        });
        this.getTableData();
      });
    },

    //启用权限
    usableMenu(num) {
      let p = {};
      p.num = num;
      Http.fetch("/menu/usable", p).then(res => {
        this.$message({
          showClose: true,
          message: res.sucMsg,
          type: "success"
        });
        this.getTableData();
      });
    },

    //删除权限
    deleteMenu(num) {
      this.$confirm("是否确定删除该权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let p = {};
          p.num = num;
          Http.fetch("/menu/delete", p)
          .then((res)=>{
          console.log('res',res)
              this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
              });
            this.getTableData();
            this.getTreeData();
          })
        .catch((err) => {
          console.log('222')
          console.log(err)
        });
        })
        
    }
  },
  mounted() {
    this.getTreeData();
    this.getTableData();
  }
};
</script>

<style scoped>
.bone-padding-10 {
  padding: 10px 10px 10px 10px;
}
.my-el-pagination {
  text-align: right;
}
</style>
